import { useLocation } from "umi";
import { Space, Descriptions } from "antd";
import dayjs from "dayjs";

const Information = () => {
    const location = useLocation();

    const staff = location.state?.staff || {};

    return (
        <Space direction="vertical" style={{ padding: 10, width: "100%" }} size={10}>
            <Descriptions column={1} bordered labelStyle={{ width: 140 }}>
                <Descriptions.Item label="基本月工资">{staff.bmSala || "-"}</Descriptions.Item>
                <Descriptions.Item label="日工资金额">{staff.daSala || "-"}</Descriptions.Item>
                <Descriptions.Item label="全勤天数">{staff.fuDays || "-"}</Descriptions.Item>
                <Descriptions.Item label="社保缴费基数">{staff.ssBase || "-"}</Descriptions.Item>
                <Descriptions.Item label="合约期">
                    <Space size={100}>
                        <div>
                            实习期：{staff.cpInfo?.internshipPeriod?.startDate ? dayjs(staff.cpInfo?.internshipPeriod?.startDate).format("YYYY年MM月DD日") : "-"} 至{" "}
                            {staff.cpInfo?.internshipPeriod?.endDate ? dayjs(staff.cpInfo?.internshipPeriod?.endDate).format("YYYY年MM月DD日") : "-"}
                        </div>
                        <div>
                            正式期：{staff.cpInfo?.formalPeriod?.startDate ? dayjs(staff.cpInfo?.formalPeriod?.startDate).format("YYYY年MM月DD日") : "-"} 至{" "}
                            {staff.cpInfo?.formalPeriod?.endDate ? dayjs(staff.cpInfo?.formalPeriod?.endDate).format("YYYY年MM月DD日") : "-"}
                        </div>
                    </Space>
                </Descriptions.Item>
                <Descriptions.Item label="签约职位">{staff.cpPosi || "-"}</Descriptions.Item>
            </Descriptions>
        </Space>
    );
};

export default Information;
